<template>
  <div class="Smslogin">
    <div class="login-page">
      <div class="login-content">
        <div class="top">
          <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019EMSgrHV5vZ1566894495.png" alt="">
        </div>

        <div class="int-num">
          <input type="text" v-model="tel" placeholder="请输入手机号">
          <button class="getCAPTCHA" size="small" type="primary" v-on:click='getSmsCode'>发送验证码</button>
        </div>

        <div class="int-num">
          <input type="password" v-model="code" placeholder="请输入验证码">
        </div>

        <!-- 下 -->
        <div class="others">
          <span class="forget">未注册的手机号自动注册</span>
          <span class="login_CAPTCHA" @click="Mmlogin">使用密码登录</span>
        </div>
      </div>
      <div class="login-button" type="info" @click="Smslogin">登录</div>
      <div class="otherLogin" v-if="showOther">
        <p>第三方登录</p>
        <div class="txLogin">
          <div class="wxLogin" @click="qqLogin(1)">
            <img src="@/assets/images/wechat.png" />
            <span>微信登录</span>
          </div>
          <div class="qqLogin" @click="qqLogin(2)">
            <img src="@/assets/images/QQ.png" alt />
            <span>QQ登录</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { login,code } from "../../api/index"
  export default {
    name: 'Smslogin',
    data() {
      return {
        tel: "",
        code: "",
        // tel: "17801116367",
        // password: "123456",
      }
    },
    methods: {
      //返回找回密码页
      Mmlogin() {
        this.$router.push("/login")
      },
      //获取验证码
      getSmsCode() {
        let obj = {
          mobile:this.tel,
          sms_type:"login"
        };
        code(obj).then(res=>{
          console.log(res)
        })
      },
      //登录
      Smslogin(){
          let obj = {
            mobile: this.tel,
            sms_code: this.code,
            type: '2'
        }
        login(obj).then(res=>{
          console.log(res)//手机号/验证码
          if(res.code === 200){
              alert("成功")
              localStorage.setItem("adminToken", JSON.stringify(res.data.remember_token));
               localStorage.setItem("userinfo", JSON.stringify(res.data));
               this.$router.push("/My")
          }
          else if(res.data.code ===201){
            alert("有误")
          }
        })
        .catch(err=>{
          console.log(err);
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .login-content {
    width: 414px;
    height: 277px;
    padding: 44px;
  }

  .top {
    width: 326px;
    height: 58px;
    margin-bottom: 72px;
  }

  img {
    width: 200px;
    margin: 35px;
  }

  .int-num {
    border-bottom: 2px solid #eee;
    width: 7.2rem;
    height: 50px;
    /* background:pink; */
  }

  input {
    box-sizing: border-box;
    padding: 0.4rem 0;
    border: 0;
    /* width: 7.2rem; */
    font-size: 0.4rem;
    line-height: 0.53333rem;
    float: left;
    outline: none;
  }

  .others {
    width: 300px;
    margin-top: 0.3rem;
    display: flex;
    justify-content: space-between;
  }

  span {
    width: 180px;
    font-size: 0.32rem;
    font-weight: 400;
    color: #999999;
  }

  .login-button {
    width: 260px;
    height: 40px;
    line-height: 40px;
    margin: 3px 45px;
    text-align: center;
    background: rgb(255, 106, 6);
    color: white;
    border-radius: 40px;
  }

  .login_CAPTCHA {
    margin-left: 25px;
  }

  .getCAPTCHA {
    width: 29%;
    height: 50px;
    margin-right: 10px;
    color: white;
    background: lightgreen;
    border-radius: 3px;
    float: right;
    padding: 0;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    line-height: 50px;
  }
</style>